<template>
    <div class="index">
        <div class="login">
            <div class="login-team">
                <img src="../assets/logo-index.png"/>
                <div style="text-align: left; margin-top: 40px">
                    <button class="indexBtn">了解一下</button>
                </div>
            </div>
        </div>
        <div class="form">
            <div class="login-form">
                <div class="login-title">
                    <span>欢迎登录</span>
                </div>
                <Form ref="formCustom" :model="formCustom" :rules="ruleCustom" label-position="left" class="form-class">
                    <FormItem prop="username">
                        <Input type="text" v-model="formCustom.username" placeholder="用户名">
                            <Icon type="ios-person-outline" slot="prepend"></Icon>
                        </Input>
                    </FormItem>
                    <FormItem prop="password">
                        <Input type="password" v-model="formCustom.password" placeholder="密码" @on-enter="handleSubmit('formCustom')">
                            <Icon type="ios-lock-outline" slot="prepend"></Icon>
                        </Input>
                    </FormItem>
                    <FormItem style="text-align: center;margin-top: 65px">
                        <Button @click="handleSubmit('formCustom')" @keyup.enter="handleSubmit('formCustom')" type="primary" long size="large">登录</Button>
                    </FormItem>
                    <Button v-for="item in oauthClients" :key="item.clientName" @click="login(item.clientUrl)">{{item.clientName}}</Button>
                </Form>
            </div>
        </div>
    </div>
</template>
<script>
    export default {
        data () {
            return {
                oauthClients:[],
                formCustom: {
                    username: '',
                    password: ''
                },
                ruleCustom: {
                    username: [
                        { required: true,message:'请输入用户名', trigger: 'blur' }
                    ],
                    password: [
                        { required: true,message:'请输入密码', trigger: 'blur' }
                    ]
                }
            }
        },
        created(){
            this.$axios.get('/login/oauthClient').then(res =>{
                this.oauthClients = res.data;
            });
        },
        methods:{
            login(url){
                this.$store.dispatch('clearUserInfo');
                window.location.href = url;
            },
            handleSubmit(name) {
                let me=this;
                this.$refs[name].validate((valid) => {
                    if (valid) {
                        let formData = new FormData();
                        formData.append('username',this.formCustom.username);
                        formData.append('password',this.formCustom.password);
                        this.$axios.post('/signIn', formData).then(() => {
                            this.$store.dispatch('fetchUserInfo');
                            this.$router.push({name: 'index'});
                        });
                    } else {
                        me.$Message.error('表单验证失败!');
                    }
                });
            }
        }
    }
</script>
<style lang="less" scoped>
    .index{
        min-height: 800px;
        min-width: 1024px;
        height: 100%;
        display: flex;
        .login{
            background-image: url("../assets/login.png");
            background-repeat: no-repeat;
            background-size: cover;
            height: 100%;
            width: 68%;
            border-bottom-right-radius: 66px;
            display: inline-block;

            .login-team{
                position: absolute;
                left: 120px;
                top: calc(50% - 142px);

                .indexBtn{
                    line-height: 36px;
                    font-size: 16px;
                    background-color: transparent;
                    border: 1px solid #fff;
                    color: #fff;
                    padding: 0 16px;
                    border-radius: 5px;
                    cursor: pointer;
                }
            }
        }

        .form{
            width: 32%;
            .login-form{
                width: 320px;
                margin: 0 auto;
                height: 100%;
                padding-top: 50%;
                text-align: center;

                .login-title{
                    margin-bottom: 66px;
                    span{
                        font-size: 18px;
                        padding-bottom: 14px;
                        border-bottom: 3px solid #3e96f1;
                    }
                }
            }
        }
    }
</style>

<style lang="less">
    .index{
        .form-class{
            .ivu-input-group-prepend{
                border: none;
                border-bottom: 1px solid #c5c5c5;
                background-color: transparent;
                border-radius: 0;
                i{
                    color: #c5c5c5;
                    font-size: 18px;
                }
            }

            input{
                border: none;
                border-bottom: 1px solid #c5c5c5;
                border-radius: 0;

                &:focus{
                    outline: 0;
                    box-shadow: none;
                    border-bottom: 1px solid #c5c5c5;
                }

                &:hover{
                    outline: 0;
                    box-shadow: none;
                    border-bottom: 1px solid #c5c5c5;
                }

            }
        }
    }
</style>